.membership {
  padding: 5px;
  height: 100%;
  // background-color: pink;
  display: flex;
  flex-direction: column;
  .title {
    height: 30px;
    font-size: 26px;

    // background-color: aqua;
  }
  .membershipPro {
    flex-wrap: wrap;
    display: flex;
    gap: 30px;

    .proItem {
      //   margin-right: 15px;
      width: 240px;
      height: 150px;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;

      .itemTop {
        margin-top: 5px;
        flex: 1;
        display: flex;
        .image {
          margin: 5px;
          width: 50px;
          height: 50px;
          //   border: 1px solid #ccc;

          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          flex: 1;
          display: flex;
          flex-direction: column;

          .tit {
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            // height: 30px;
            // background-color: #ccc;

            .onLine {
              box-sizing: border-box;
              font-size: 13px;
              border-radius: 50%;
              width: 34px;
              height: 32px;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 2px;
              background-color: #90bbc0;
              color: white;
              margin-right: 5px;
            }
          }
          .detal {
            margin-top: 5px;
            color: #ccc;
            font-size: 15px;
          }
        }
      }
      .itemBtn {
        background-color: #c0d7da;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
    }
  }
}
